﻿@{
    ViewBag.Title = "Index";   
}

<style>
    table, td, th {
        border: 1px dotted #dedede;
        text-align: center;
        color: #045083;
    }

    td {
        width: 40px;
        padding: 8px 5px;
    }

    th {
        background: #007acc;
        line-height: 2;
        color: #fff;
    }

    td:first-child {
        background: #007acc;
        color: #fff;
    }

    td:nth-child(8) {
        background: #aadbfb;
    }

    tr:hover td {
        background: #0ab2e0;
        color: #fff;
        cursor: pointer;
    }

    tr:nth-child(2n+1) {
        background: #eee;
    }

    .redBlock {
        float: left;
        display: block;
        width: 360px;
    }

    .ul-data-source {
        list-style: none;
        margin: 0px;
        float: left;
        display: block;
        padding: 10px;
    }

        .ul-data-source input {
            border: 0px;
        }

        .ul-data-source li {
            float: left;
            display: inline-block;
            text-align: center;
            margin: 2px;
        }

        .ul-data-source label {
            width: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #ea5a3f;
            display: inline-block;
            color: #fff;
            font-size: 1.5em;
            border-right: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
        }

        .ul-data-source .orange {
            background-color: orange;
        }

        .ul-data-source .labelDisabled {
            background-color: #aaa;
            color: #ccc;
        }

    .red {
    }

    .ul-data-source.blue {
        width: 250px;
    }

        .ul-data-source.blue label {
            background-color: #007acc;
            color: #fff;
        }

            .ul-data-source.blue label:hover {
                background-color: #045083;
            }

            .ul-data-source.blue label.blueheightLight {
                background-color: #0ab2e0;
            }

    .redSelect li {
        margin: 2px;
    }

        .redSelect li label {
            width: 30px;
            line-height: 30px;
            text-align: center;
            background: #ea5a3f;
            color: #fff;
            display: block;
            font-size: 1em;
        }

            .redSelect li label:hover {
                background: #085a13;
            }

            .redSelect li label.selected {
                background: #52a82b;
                color: #fff;
            }

    h3 {
        color: #fff;
        background: #007acc;
        padding: 10px 15px 5px 15px;
        display: inline-block;
    }

    #aDownload {
        border: 0px solid red;
        display: inline-block;
        background: #007acc url(images/down.png) no-repeat;
        height: 50px;
        width: 42px;
    }

    .dropdown-menu-list {
        position: relative;
        display: inline-block;
        border: 0px solid red;
        color: #fff;
    }

        .dropdown-menu-list:hover .menu-list {
            display: block;
        }

    .menu-list {
        font-size: 1em;
        display: none;
        border: 0px solid green;
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 50px;
        left: 0px;
        background: #007acc;
        width: 100%;
    }

        .menu-list li {
            padding: 5px 5px 5px 15px;
            display: block;
            white-space: nowrap;
        }

            .menu-list li:hover {
                background: #c0effc;
                cursor: pointer;
                color: #045083;
            }
</style>
<div class="dropdown-menu-list menu-0">
    <h3>六选五中组合401(8)</h3>
    <ul class="menu-list" data-menuid="0">
        <li data-code="8">六选五中组合401(8)</li>
        <li data-code="9">六选五中组合402(9)</li>
        <li data-code="10">六选五中组合403(10)</li>
        <li data-code="11">六选五中组合404(11)</li>
        <li data-code="12">六选五中组合405(12)</li>
        <li data-code="13">六选五中组合406(13)</li>
        <li data-code="14">六选五中组合407(14)</li>
        <li data-code="15">六选五中组合408(15)</li>
        <li data-code="16">六选五中组合409(16)</li>
    </ul>
</div>
<div class="dropdown-menu-list menu-1">
    <h3>五选五中（带胆）701(7)</h3>
    <ul class="menu-list" data-menuid="1">
        <li data-code="7">五选五中（带胆）701(7)</li>
        <li data-code="8">五选五中（带胆）702(8)</li>
        <li data-code="9">五选五中（带胆）703(9)</li>
        <li data-code="10">五选五中（带胆）704(10)</li>
        <li data-code="11">五选五中（带胆）705(11)</li>
        <li data-code="12">五选五中（带胆）706(12)</li>
        <li data-code="13">五选五中（带胆）707(13)</li>
        <li data-code="14">五选五中（带胆）708(14)</li>
        <li data-code="15">五选五中（带胆）709(15)</li>       
    </ul>
</div>



<div style="border: 5px #007acc solid; line-height: 1.5; display: block;">
    <div class="redBlock">
        <ul class="ul-data-source">
            @for (int i = 1; i < 34; i++)
            {
                var red = i.ToString("00");
                <li class="red">@Html.Label(red, new { @name = "labRed" })</li>
            }
        </ul>
        <ul class="ul-data-source redSelect">
            @for (int i = 0; i < 8; i++)
            {
                <li>@Html.Label("00", new { @name = "labRedSelect", @id = "lab_" + i.ToString() })</li>
            }

        </ul>
    </div>
    <ul class="ul-data-source blue">
        @for (int i = 1; i < 17; i++)
        {
            var blue = i.ToString("00");
            <li>@Html.Label(blue, new { @name = "labBlue" })</li>
        }
    </ul>

    <div style="float: left; width: auto">
        <input type="button" id="btnSubmit" value="开始组合" /><br />
        <a id="aDownload" title="保存数据" href="/SixFiveSmartCombinations/downloadData" target="_blank"></a>
    </div>
    <div class="clearer"></div>
</div>
<div id="dataGrid"></div>

@section Scripts {
    <script type="text/javascript">
        var codeCount = 8;
        var combinType = 0;

        $(document).ready(function () {
            var $collentionMenus = $(".menu-list li");
            var $collectionLabRedSource = $("label[name='labRed']");
            var $collectionLabRed = $("label[name = 'labRedSelect']");
            var $collectionLabBlue = $("label[name='labBlue']");

            $collentionMenus.bind("click", function () {
                window.combinType = $(this).parent().data("menuid");
                var menuSelector = ".dropdown-menu-list.menu-" + window.combinType + " h3";
                $(menuSelector).text($(this).text());
                var labelList = "";
                window.codeCount = $(this).data("code");
                for (var i = 0; i < window.codeCount; i++) {
                    labelList += "<li><label id=\"lab_" + i + "\" for=\"\" name=\"labRedSelect\">00</label></li>";
                }

                $(".ul-data-source.redSelect").html(labelList);
                $collectionLabRedSource.removeClass("orange").removeClass("labelDisabled ");

            });

            $collectionLabBlue.bind("click", function () {
                $(this).toggleClass("blueheightLight");
            });

            $("label[name = 'labRedSelect']").live("click", function () {

                var selected = false;
                var $selected = null;
                var text = "00";

                if ($(this).hasClass("selected")) {
                    $(this).removeClass("selected");
                    return false;
                }
                else {
                    $(this).addClass("selected");
                }
                var $that = $(this);
                $("label[name = 'labRedSelect']").each(function () {
                    if ($(this).hasClass("selected") && $that.attr("id") != $(this).attr("id")) {
                        selected = true;
                        $selected = $(this);
                    }
                });

                if (selected) {
                    text = $selected.text();
                    $selected.text($(this).text());
                    $(this).text(text);
                    $selected.removeClass("selected");
                }

            });

            $collectionLabRedSource.bind("click", function () {

                if ($(this).hasClass("orange")) {
                    $(this).removeClass("orange");

                    for (var i = 0; i < window.codeCount; i++) {
                        var $lab = $("#lab_" + i);
                        if ($lab.text() == $(this).text()) {
                            $lab.text("00");
                            break;
                        }
                    }

                    $("label[name='labRed']:not('.orange')").removeClass("labelDisabled");
                }
                else {
                    if ($("label[name='labRed'].orange").length >= window.codeCount) {
                        return false;
                    } else {

                        $(this).addClass("orange");
                        var text = $(this).text();
                        var isExists = false;
                        $collectionLabRed.each(function () {
                            if ($(this).text() == text)
                                isExists = true;
                        });

                        if (isExists) {
                            if (!$(this).hasClass("orange")) {
                                for (var i = 0; i < window.codeCount; i++) {
                                    var $lab = $("#lab_" + i);
                                    if ($lab.text() == text) {
                                        $lab.text("00");
                                        break;
                                    }
                                }
                            }
                        }
                        else {
                            if ($(this).hasClass("orange")) {
                                for (var i = 0; i < window.codeCount; i++) {
                                    var $lab = $("#lab_" + i);
                                    if ($lab.text() == "00" || $lab.text() == "") {
                                        $lab.text(text);
                                        break;
                                    }
                                }
                            }
                        }
                    }

                    if ($("label[name='labRed'].orange").length >= window.codeCount) {
                        $("label[name='labRed']:not('.orange')").addClass("labelDisabled");
                    }
                }

            });

            $("#btnSubmit").bind("click", function () {
              
                var redCodes = "";
                var blueCodes = "";

                $("label[name = 'labRedSelect']").each(function () {
                    redCodes += $(this).text() + ","
                });

                $("label[name='labBlue'].blueheightLight").each(function () {

                    blueCodes += $(this).text() + ","

                });

                $("#dataGrid").html("<p>.........</p>");
                $.ajax({
                    type: "POST",
                    url: "/SixFiveSmartCombinations/generateData",
                    data: { "redCodes": redCodes, "blueCodes": blueCodes, "combinType": window.combinType },
                    success: function (msg) {
                        $("#dataGrid").html(msg);
                    },
                    error: function (e) {
                        alert(e);
                    }

                });
            });
        });
    </script>
}